<div class="temp-dash" fxLayout="row wrap" fxLayout.sm="column" fxLayoutGap="20px">

    <mat-card fxFlex="33" fxFlex.sm="100" fxFlex.xs="100">
        <h3>Certificates</h3>
        <mat-divider></mat-divider>
        <ul>
            <li (click)="systemNav('ca')">CAs</li>
            <li (click)="systemNav('certificates')">Certificates</li>
            <li (click)="systemNav('acmedns')" *ngIf="!isScale">ACME DNS</li>
        </ul>
    </mat-card>

    <mat-card fxFlex="33" fxFlex.sm="100" fxFlex.xs="100">
        <h3>Misc</h3>
        <mat-divider></mat-divider>
        <ul>
            <li (click)="systemNav('alertsettings')">Alert Settings</li>
            <li (click)="systemNav('email')">Email</li>
            <li (click)="navExternal('https://www.truenas.com/docs/')">Guide</li>
            <li (click)="systemNav('ntpservers')">NTP Servers</li>
            <li (click)="systemNav('dataset')">System Dataset</li>
            <li (click)="systemNav('tunable')" *ngIf="!isScale">Tunables</li>
        </ul>
    </mat-card>

    <mat-card fxFlex="33" fxFlex.sm="100" fxFlex.xs="100">
        <h3>Platform-dependent</h3>
        <mat-divider></mat-divider>
        <ul>
            <li (click)="nav('clustering')">Clustering</li>
            <li (click)="nav('containers')" *ngIf="isScale">Containers</li>
            <li (click)="systemNav('failover')" *ngIf="is_ha">Failover</li>
            <li (click)="systemNav('kmip')" *ngIf="isEnterprise && !isScale">KMIP</li>
            <li (click)="systemNav('tunable')" *ngIf="isScale">Sysctrl</li>
        </ul>
    </mat-card>

</div>
